<template>
  <div class="literature">
    <div class="booktop">
      <div class="top">
        <div class="top1">
          <div class="imgs" @click="toshuj()">
            <img src="../../assets/images/logon.png" alt="" />
          </div>
          <div class="lefts">
            <div></div>
            <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
            <div class="lefts2">
              Zhejiang Province Intangible Culture Digital Literature Center
            </div>
          </div>
          <div class="rights">
            <div></div>
            <div class="ris1">
              <div class="ri">&emsp;&emsp;</div>
              <div class="ri">&emsp;&emsp;</div>
              <!-- <div class="ri" style="cursor: pointer" @click="touser()">我的</div> -->
              <!-- <div class="ri">
                <el-dropdown @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link" style="cursor: pointer">
                    <span
                      style="
                        font-size: 18px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #333333;
                      "
                      >欢迎
                    </span>
                    <span style="padding-left: 12px; font-size: 16px">
                      {{ yhm.yhm }}
                    </span>
                    <i
                      class="el-icon-arrow-down el-icon--right"
                      style="font-size: 14px"
                    ></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click="tologin()">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div> -->

            </div>
            <div class="ris3">
              <el-form :inline="true" :model="formInline" class="demo-form-inline"
                style="width: 100%; display: flex; height: 56px">
                <el-form-item style="width: 382px; height: 56px; margin-bottom: 0">
                  <el-input v-model="formInline.user" placeholder="输入关键词搜索" style="width: 382px; height: 56px">
                    <img @click="sousuo()" slot="append" src="../../assets/images/sousuo.png" alt="" />
                  </el-input>
                  <!-- <el-input placeholder="输入关键词搜索" v-model="formInline.user" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="sousuos()"></el-button>
                        </el-input> -->
                </el-form-item>
                <el-form-item>
                  <div style="padding-left:20px;margin-top: 7px;cursor: pointer;" @click="onSubmit()">
                    <div
                      style=" display: flex;align-items: center;height:100%;font-size: 18px;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #911f23">
                      高级检索 <i style="font-size:18px;font-weight:550" class="el-icon-arrow-right"></i></div>
                  </div>
                </el-form-item>
              </el-form>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="literature_box">
      <div class="literature_info">
        <div class="literature_info_content">
          <div class="main_content">
            <div class="main_content_item1">
              <div class="title">
                {{ pcxqlist.jdmc }}
              </div>
              <div class="operate">
                <div class="literature_info_tag">
                  <span>类型:{{ pcxqlist.jdlxname }}</span>
                  <em></em>
                  <span>所属县区: {{ pcxqlist.areaname }}</span>

                </div>
                <div class="operate_item operate_item1">
                  <!-- <i></i>
                  <span>收藏</span> -->
                </div>
                <!-- <div class="operate_item operate_item2">
                  <i></i>
                  <span>下载</span>
                </div> -->
              </div>
              <p v-if="pcxqlist.jdjianjie">
                {{ filtertt(pcxqlist.jdjianjie) }}
              </p>
            </div>
            <div class="main_content_item2">
              <el-main>
                <span class="beautify"></span>
                <h1 id="-1" style="margin-top:30px">基本信息</h1>
                <div class="basic_information">
                  <div class="basic_information_item">
                    <span>级别：</span>
                    <div>{{ pcxqlist.jdjibiename }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>申报单位：</span>
                    <div>{{ pcxqlist.sbdw }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>申报时间：</span>
                    <div>{{ pcxqlist.sbsj }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span style="    min-width: 43px;">地址：</span>
                    <div>{{ pcxqlist.jddizhi }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>负责人：</span>
                    <div>{{ pcxqlist.fzr }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>负责人电话：</span>
                    <div>{{ pcxqlist.fzrdh }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>联系人：</span>
                    <div>{{ pcxqlist.lxr }}</div>
                  </div>
                  <div class="basic_information_item">
                    <span>联系人电话：</span>
                    <div>{{ pcxqlist.lxrdh }}</div>
                  </div>

                </div>
                <span class="beautify" v-if="gdxx"></span>
                <h1 id="-1" v-if="gdxx">归档信息</h1>
                <div class="inheritor inheritor_gdxx" v-if="gdxx">
                  <div class="basic_information">
                    <div class="basic_information_item">
                      <span>索引号:</span>
                      <div>{{ gdxx.syh }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>条码号:</span>
                      <div>{{ gdxx.tmh }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>馆藏状态:</span>
                      <div>{{ gdxx.zt == 1 ? '出借' : '在馆' }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>应还时间:</span>
                      <div>{{ gdxx.yhsj | dataFormat }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>排架号:</span>
                      <div>{{ gdxx.pjh }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>文献所属馆:</span>
                      <div>{{ gdxx.ssg }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>所在馆:</span>
                      <div>{{ gdxx.szg }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>所在馆位置:</span>
                      <div>{{ gdxx.szgwz }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>卷册信息:</span>
                      <div>{{ gdxx.jcxx }}</div>
                    </div>
                    <div class="basic_information_item">
                      <span>备注:</span>
                      <div>{{ gdxx.bz }}</div>
                    </div>
                  </div>
                </div>
                <span v-show="pcxqlist.xzgk" class="beautify"></span>
                <h1 v-show="pcxqlist.xzgk" id="-">现况概述</h1>
                <p v-show="pcxqlist.xzgk" v-html="pcxqlist.xzgk">

                </p>
                <span v-show="pcxqlist.sbly" class="beautify"></span>
                <h1 v-show="pcxqlist.sbly" id="-" style="margin-top:30px">申报理由</h1>
                <p v-show="pcxqlist.sbly" v-html="pcxqlist.sbly">
                </p>
                <span v-show="pcxqlist.ccjh" class="beautify"></span>
                <h1 v-show="pcxqlist.ccjh" id="-" style="margin-top:30px">传承计划</h1>
                <p v-show="pcxqlist.ccjh" v-html="pcxqlist.ccjh">

                </p>
                <span v-show="pcxqlist.bzcs" class="beautify"></span>
                <h1 v-show="pcxqlist.bzcs" id="-" style="margin-top:30px">保障措施</h1>
                <p v-show="pcxqlist.bzcs" v-html="pcxqlist.bzcs"></p>
                <!-- <span class="beautify"></span>
                <h1 id="-" >馆藏地址</h1>
                <div class="inheritor">
                  <el-table
                    :data="tableDatas"
                    style="width: 100%"
                    :header-cell-style="{
                      textAlign: 'center',
                      background: '#F7F7F8',
                      fontSize: '14px',
                      fontWeight: '400',
                      color: '#666666',
                      fontFamily: 'Source Han Sans CN-Regular, Source Han Sans CN',
                    }"
                    :cell-style="{
                      textAlign: 'center',
                      fontSize: '14px',
                      fontWeight: '400',
                      color: '#333333',
                      fontFamily: 'Source Han Sans CN-Regular, Source Han Sans CN',
                    }"
                  >
                    <el-table-column prop="date" fixed label="索引号"></el-table-column>
                    <el-table-column prop="name" label="条码号"></el-table-column>
                    <el-table-column prop="address" label="馆藏状态"> </el-table-column>
                    <el-table-column prop="s1" label="应还时间"> </el-table-column>
                    <el-table-column prop="s2" label="备注/排架号"> </el-table-column>
                    <el-table-column prop="s3" label="文献所属馆"> </el-table-column>
                    <el-table-column prop="s4" label="所在馆"> </el-table-column>
                    <el-table-column prop="s5" label="所在馆位置"> </el-table-column>
                    <el-table-column prop="s9" label="流通类型"> </el-table-column>
                    <el-table-column prop="s6" label="卷册信息"> </el-table-column>
                  </el-table>
                </div> -->
                <div style="width:100%;height:30px"></div>



              </el-main>
              <el-aside :class="showTitle == false ? 'hide_opacity' : 'show_opacity'">
                <div style="
                    margin: 0px 0 0 180px;
                    font-size: 18px;
                    font-weight: bold;
                  ">
                  <!-- 目录 -->
                </div>
                <el-tabs @tab-click="handleClick" v-model="activeName" :tab-position="tabPosition" style="height: auto">
                  <el-tab-pane :name="'tab' + index" :class="item.lev" v-for="(item, index) in navList" :key="index"
                    :label="(index + 1) + ' . ' + item.name"></el-tab-pane>
                </el-tabs>
              </el-aside>
              <div class="on_top" @click="onScrollTop" v-show="showTitle">
                <i></i>
              </div>
            </div>
          </div>
          <div class="side_content">
            <div class="sound_video_data" @click="edogs()" v-if="lengths != 0">
              <img :src="pupianList[0]" alt="" />
              <span>
                <i></i>
                相关图片（{{ lengths }}个）
              </span>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="dog" v-if="edog">
      <div class="zhezhao">
        <el-carousel height="600px">
          <el-carousel-item v-for="item in pupianList" :key="item">
            <div style="width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
              <img :src="item" alt="" @click="guanbu()">
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="tubiao" @click="guanbu()"><i class="el-icon-close" style="font-size:30px;color:#fff"></i></div>
      </div>
    </div>
    <div style="width:100%;height:100px"></div>
    <footbtn style="position: fixed;bottom: 0;z-index:1000000000000"></footbtn>
  </div>
</template>

<script>
import literatureSwiper from "./swiper";
import footbtn from "../../components/foot/index.vue";
import { getszda, gettuichu, getwxgdxx } from "@/api/api.js";
export default {
  name: "",
  components: {
    // 轮播组件
    literatureSwiper,
    footbtn,
  },
  data() {
    return {
      tableDatas: [
        {
          date: "G122/132/2021:1",
          name: "地方文献阅览室",
          address: "馆内阅览",
          s1: "图书",
          s2: "/",
          s3: "浙江省图书馆",
          s4: "浙江图书馆",
          s5: "/",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },

      ],
      yhm: {},
      showLogin: false,
      formInline: {
        user: "",
      },
      activeName: "tab0",
      tabPosition: "right",
      scroll: "",
      navList: [],
      showTitle: false,
      tableData: [
        {
          pic: "",
          name: "杭州胡庆余堂国药号有限公司",
          type: "教学基地",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          grade: "国家级",
          batch: "一",
        },
      ],
      tableData2: [
        {
          name: "关于推荐点茶等32个项目申报第七批杭州市非物质文化遗产代表性项目的请示",
          date: "2016-05-02",
          proof: "杭上文广旅体﹝2022﹞号",
          type: "县级文件",
        },
      ],
      tableData: [
        {
          date: "G122/132/2021:1",
          name: "地方文献阅览室",
          address: "馆内阅览",
          s1: "图书",
          s2: "/",
          s3: "浙江省图书馆",
          s4: "浙江图书馆",
          s5: "/",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },

      ],
      mc: '',
      id: 0,
      lx: 0,
      pcxqlist: {},
      pupianList: [],
      lengths: 0,
      edog: false,
      gdxx: {},
    };
  },
  created() {
    this.id = this.$route.query.id
    this.lx = this.$route.query.lx
    // this.id = 7
    // this.lx = 285
    this.formInline.user = sessionStorage.getItem("sousuo");
    this.yhm = JSON.parse(sessionStorage.getItem("loginInfo")) ? JSON.parse(sessionStorage.getItem("loginInfo")) : ""
    this.bookxq();
    this.getwxgdxx()
  },
  mounted() {
    // scroll代表滚动条距离页面顶部距离
    window.addEventListener("scroll", this.dataScroll);
    this.selectAllTitle();
    this.$nextTick(() => {
      setTimeout(() => {
        let navs = document.querySelectorAll(".el-tabs__item");
        for (let i = navs.length - 1; i >= 0; i--) {
          // 从lev1到lev5分别添加不同到样式
          document.querySelector("#" + navs[i].id).style.padding = "0";
          if (this.navList[i].lev == "lev1") {
            document.querySelector("#" + navs[i].id).style.paddingLeft = "20px";
            // document.querySelector("#" + navs[i].id).style.color = "#911F23";
          } else if (this.navList[i].lev == "lev2") {
            document.querySelector("#" + navs[i].id).style.paddingLeft = "45px";
            let onId = document.querySelector("#" + navs[i].id);
            let setDiv = document.createElement("span");
            onId.appendChild(setDiv);
          } else if (this.navList[i].lev == "lev3") {
            document.querySelector("#" + navs[i].id).style.paddingLeft = "50px";
          } else if (this.navList[i].lev == "lev4") {
            document.querySelector("#" + navs[i].id).style.paddingLeft = "65px";
            document.querySelector("#" + navs[i].id).style.fontWeight = "400";
          } else if (this.navList[i].lev == "lev5") {
            document.querySelector("#" + navs[i].id).style.paddingLeft = "80px";
            document.querySelector("#" + navs[i].id).style.fontWeight = "400";
          }
        }
      });
    });
  },
  methods: {
    async getwxgdxx() {
      let res = await getwxgdxx({
        id: this.lx,
        lx: this.id
      })
      console.log('归档信息==', res);
      if (res.code == 200) {
        this.gdxx = res.data[0]
        console.log('this.gdxx', this.gdxx);
      }
    },
    filtertt(text) {
      var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
      text = text.replace(reg, ""); //替换HTML标签
      text = text.replace(/&emsp;/gi, ""); //替换HTML空格
      text = text.replace(/&nbsp;/gi, "");
      return text;
    },
    touser() {
      const { href } = this.$router.resolve({ path: "/sc", query: {} });
      window.open(href, '_blank');
    },
    guanbu() {
      this.edog = false
    },
    edogs() {
      this.edog = true
    },
    sousuo() {
      sessionStorage.setItem("erjsnav", 1);
      sessionStorage.setItem("sousuo", this.formInline.user);
      this.$router.push({
        path: "/s2",
        query: {},
      });
    },
    async bookxq() {
      let res = await getszda({
        id: this.lx * 1,
        type: this.id * 1
      });

      this.pcxqlist = res;
      this.pupianList = res.pics
      this.lengths = res.pics.length
    },
    toshuj() {
      sessionStorage.setItem("erjsnav", 1);
      sessionStorage.setItem("sousuo", this.formInline.user);
      this.$router.push({
        path: "/s2",
        query: {},
      });
    },
    async handleCommand(command) {
      let res = await gettuichu()
      sessionStorage.removeItem("loginInfo")
      this.$router.push("/");
    },
    onScrollTop() {
      document.documentElement.scrollTop = 0;
    },
    indexMethod(index) {
      return index + 1;
    },
    onSubmit() {
      // sessionStorage.setItem("erjsnav", 1);
      sessionStorage.setItem("erjsnav", 0);
      this.$router.push({
        path: "/retrieval",
        query: {},
      });
    },
    handleClick(tab, event) {
      this.jump(tab.index);
    },
    dataScroll: function () {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll > 800) {
        this.showTitle = true;
      } else {
        this.showTitle = false;
      }
    },
    jump(index) {
      let jump = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
      // 获取需要滚动的距离
      let total = jump[index].offsetTop - 80;
      // Chrome
      document.body.scrollTop = total;
      // Firefox
      document.documentElement.scrollTop = total;
      // Safari
      window.pageYOffset = total;
      // $('html, body').animate({
      // 'scrollTop': total
      // }, 400);
    },
    loadScroll: function () {
      let self = this;
      let navs = document.querySelectorAll(".el-tabs__item");
      // var sections = document.getElementsByClassName('section');
      for (var i = self.navList.length - 1; i >= 0; i--) {
        if (self.scroll >= self.navList[i].offsetTop - 120) {
          self.activeName = "tab" + i;
          break;
        }
      }
    },
    selectAllTitle() {
      let title = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
      this.navList = Array.from(title);
      this.navList.forEach((item, i) => {
        item.name = item.innerHTML;
      });
      this.navList.forEach((el) => {
        let index = el.localName.indexOf("h");
        el.lev = "lev" + el.localName.substring(index + 1, el.localName.length);
      });
    },
  },
  watch: {
    scroll: function () {
      this.loadScroll();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f3ebeb;
  color: #911F23;

}

::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}

::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}

//搜索框
::v-deep .el-input-group>.el-input__inner {
  height: 56px;
  border: 0px;
}

::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}

::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}

::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}

::v-deep .el-main {
  padding: 0;
}

::v-deep .el-tabs__active-bar {
  position: absolute;
  z-index: 2;
  top: 5px;
  height: 0 !important;
  width: 0;
  border-top: 6px solid transparent;
  border-left: 9px solid #911f23;
  border-bottom: 6px solid transparent;
  border-right: 0;
  cursor: pointer;
  background-color: transparent;
}

::v-deep .el-tabs--right .el-tabs__active-bar.is-right {
  top: 8px !important;
  left: 1px !important;
}

::v-deep .el-tabs__item {
  height: 30px;
  line-height: 30px;
  color: #999;
}

::v-deep .el-tabs__item.is-active {
  color: #911f23;
}

::v-deep .el-divider {
  width: 320px;
  height: 2px;
  background: url("../../assets/images/line.png") no-repeat;
  display: block;
  background-size: 100%;
}

::v-deep .el-table {
  border-radius: 8px 8px 0px 0px;
}

::v-deep .el-table th.el-table__cell {
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #fff;
  background: #f5f5f5;
  color: #999999;
}

::v-deep .el-tabs__item {
  position: relative;

  span {
    width: 6px;
    height: 6px;
    background: #999999;
    border-radius: 6px;
    position: absolute;
    left: 32px;
    top: 12px;
  }
}

.pointer:after {
  width: 2px;
  height: 2px;
  background: #333333;
}

.el-main {
  width: 900px;
}

.el-tabs__header.is-right {
  height: 500px !important;
}

.el-aside {
  position: fixed;
  top: 230px;
  right: 24%;
  width: 220px;
  height: auto;
}

.hide_opacity {
  opacity: 0;
}

.show_opacity {
  opacity: 1;
}

.on_top {
  cursor: pointer;
  position: fixed;
  top: 450px;
  right: 25%;

  i {
    width: 42px;
    height: 42px;
    background: url("../../assets/images/top.png") no-repeat;
    display: block;
    background-size: 100%;
  }
}

.icon-sources-wapper.wapper .el-tabs__nav.is-right {
  box-sizing: content-box !important;
}

.dog {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;

  .zhezhao {
    width: 1000px;
    height: 600px;
    background-color: #fff;
    box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000;
  }

  .tubiao {
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 10000;
    cursor: pointer;
  }
}

.literature {
  .booktop {
    width: 100%;
    height: 200px;
    background: url("../../assets/images/booktop.png") no-repeat;
    background-size: 100% 100%;

    .top {
      width: 1400px;
      height: 176px;
      margin: 0 auto;

      // background-color: #F7F7F8;
      .top1 {
        position: relative;
        width: calc(100% - 0px);
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // background-color: pink;
        .imgs {
          position: absolute;
          top: 0;
          width: 138px;
          height: 176px;
          z-index: 100;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .lefts {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-left: 170px;

          .lefts1 {
            font-size: 24px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            // line-height: 35px;
          }

          .lefts2 {
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }

        .rights {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          // padding-bottom: 40px;
          height: 100%;

          .ris1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 18px;
            width: 362px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #3d3d3d;
            margin-top: 0px;
          }

          .ris2 {
            position: absolute;
            top: 90px;
            width: calc(362px - 48px);
            height: 290px;
            background: #ffffff;
            box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            z-index: 20;
            padding: 24px;

            .login {
              width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              padding-bottom: 24px;
            }

            .i1 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #999999;
              }
            }

            .i2 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs1.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;
              }
            }

            .submit {
              width: 100%;
              height: 46px;
              background: #911f23;
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }

            .fts {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;

              .fts1 {
                color: #911f23;
                cursor: pointer;
              }

              .fts2 {
                color: #cccccc;
                cursor: pointer;
              }
            }
          }

          .ris3 {
            // width: 362px;
            // margin-top: 37px;
          }

          .ri {
            padding-right: 30px;
          }

          .ri1 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 68px;
            height: 38px;
            background: #911f23;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }

  .literature_box {
    width: 1400px;
    margin: 0 auto;
    background: #fff;
    margin-bottom: 80px;

    .literature_info {
      .literature_info_content {
        // margin-top: 50px;
        padding: 0 33px;
        display: flex;
        justify-content: space-between;

        .main_content {
          width: 1042px;

          .main_content_item1 {
            width: 900px;

            .title {
              width: 100%;
              font-size: 34px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #3D3D3D;
              line-height: 52px;
              padding-top: 12px;
            }

            .operate {
              display: flex;
              justify-content: space-between;
              margin: 16px 0;

              .literature_info_tag {
                // padding-left: 55px;
                display: flex;
                align-items: center;

                // margin-bottom: 18px;
                span {
                  font-size: 12px;
                  font-weight: 400;
                  color: #911F23;
                }

                em {
                  width: 1px;
                  height: 8px;
                  background: #d8d8d8;
                  // display: inline-block;
                  margin: 0 9px;
                }
              }

              .operate_item {
                i {
                  margin-right: 3px;
                }

                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: #333333;
                }
              }

              .operate_item1 {
                display: flex;
                margin-right: 24px;
                align-items: center;

                i {
                  width: 17px;
                  height: 17px;
                  background: url("../../assets/images/s1.png") no-repeat;
                  display: block;
                  background-size: 100% 100%;
                }
              }

              .operate_item2 {
                display: flex;

                align-items: center;

                i {
                  width: 17px;
                  height: 17px;
                  background: url("../../assets/images/download.png") no-repeat;
                  display: block;
                  background-size: 100% 100%;
                }
              }
            }

            p {
              font-size: 14px;
              font-weight: 400;
              color: #3d3d3d;
              line-height: 24px;
            }
          }

          .main_content_item2 {
            position: relative;

            .beautify {
              width: 12px;
              height: 24px;
              background: #911f23;
              position: absolute;
              left: -30px;
              margin-top: 33px;
            }

            h1 {
              font-size: 22px;
              font-weight: 500;
              color: #3d3d3d;
              margin-top: 47px;
            }

            h2 {
              font-size: 14px;
              font-weight: 400;
              color: #3d3d3d;
              line-height: 20px;
              margin-bottom: 5px;
              margin-top: 20px;
            }

            p {
              font-size: 14px;
              font-weight: 400;
              color: #3d3d3d;
              line-height: 24px;
              margin-top: 20px;
            }

            .inheritor {
              margin-top: 20px;

              .inheritor_title {
                display: flex;
                justify-content: center;
                margin-bottom: 24px;

                span {
                  font-size: 24px;
                  font-weight: 500;
                  color: #911f23;
                }
              }

              .inheritor_list {
                .inheritor_item {
                  width: 512px;
                  height: 216px;
                  border-radius: 8px;
                  border: 1px solid #d8d8d8;
                  display: flex;

                  .img {
                    padding: 24px 16px 24px 24px;

                    img {
                      width: 168px;
                      height: 168px;
                    }
                  }

                  .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 24px 0;

                    .name {
                      font-size: 20px;
                      font-weight: 400;
                      color: #3d3d3d;
                      line-height: 30px;

                      span {
                        font-size: 14px;
                        font-weight: 400;
                        color: #999999;
                      }
                    }

                    .type {
                      width: max-content;
                      font-size: 12px;
                      font-weight: 400;
                      color: #ffffff;
                      line-height: 18px;
                      background: #911f23;
                      border-radius: 46px;
                      padding: 2px 8px;
                    }

                    .bottom {
                      .bottom_item {
                        font-size: 14px;
                        font-weight: 400;
                        color: #999999;
                        padding-bottom: 5px;

                        span {
                          color: #333333;
                        }
                      }
                    }
                  }
                }
              }
            }

            .main_content_title {
              margin-top: 32px;
              margin-bottom: 24px;
              display: list-item;

              .para_title {
                display: block;
                clear: both;
                border-left: 12px solid#911F23;
                line-height: 24px;
                font-weight: 400;
                position: absolute;
                left: -34px;
                *zoom: 1;
              }
            }

            .basic_information {
              display: flex;
              flex-wrap: wrap;
              border: 1px solid #d8d8d8;
              border-left: 0;
              border-right: 0;
              margin: 24px 0 16px;
              padding: 20px 24px 5px;

              .basic_information_item {
                display: flex;
                width: calc(33.3% - 20px);
                padding-right: 20px;
                margin-bottom: 22px;

                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: #911f23;
                  display: block;
                  margin-bottom: 4px;
                }

                div {
                  margin-left: 20px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #3d3d3d;
                }
              }
            }

            .inheritor_gdxx {
              .basic_information {
                display: flex;
                flex-wrap: wrap;
                border: 1px solid #d8d8d8;
                border-left: 0;
                border-right: 0;
                margin: 24px 0 16px;
                padding: 20px 24px 5px;

                .basic_information_item {
                  display: flex;
                  width: calc(33.3% - 20px);

                  margin-bottom: 22px;

                  span {
                    padding-right: 20px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #911f23;
                    display: block;
                    // margin-bottom: 4px;
                  }

                  div {
                    font-size: 14px;
                    font-weight: 400;
                    color: #3d3d3d;
                  }
                }
              }
            }

            .information {
              .information_text {
                font-size: 14px;
                font-weight: 400;
                color: #911f23;
                padding-bottom: 5px;
              }

              p {
                font-size: 14px;
                font-weight: 400;
                color: #3d3d3d;
                line-height: 24px;
                padding-bottom: 20px;
              }
            }
          }
        }

        .side_content {
          width: 268px;
          padding-top: 24px;
          z-index: 100000;

          .sound_video_data {
            border: 1px solid #d8d8d8;

            img {
              width: 268px;
              height: 270px;
              display: block;
            }

            span {
              display: flex;
              font-size: 16px;
              font-weight: 400;
              color: #3d3d3d;
              line-height: 24px;
              padding: 5px 0;

              i {
                width: 24px;
                height: 24px;
                background: url("../../assets/images/video.png") no-repeat;
                display: block;
                background-size: 100% 100%;
                margin: 0 4px 0 12px;
              }
            }
          }

          .books {
            margin-top: 24px;
            border: 1px solid #d8d8d8;

            .books_text {
              span {
                display: flex;
                font-size: 16px;
                font-weight: 400;
                color: #3d3d3d;
                line-height: 24px;
                padding: 5px 0;

                i {
                  width: 24px;
                  height: 24px;
                  background: url("../../assets/images/book.png") no-repeat;
                  display: block;
                  background-size: 100% 100%;
                  margin: 0 4px 0 12px;
                }
              }

              img {
                width: 266px;
                height: 402px;
                display: block;
              }

              .books_bottom {
                padding-left: 13px;

                .books_name {
                  font-size: 14px;
                  font-weight: 400;
                  color: #3d3d3d;
                  padding-bottom: 4px;
                }

                .books_author {
                  font-size: 12px;
                  font-weight: 400;
                  color: #999999;
                  padding-bottom: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>